<template>
  <!-- 辅助空白 -->
  <view class="diy-shop">
    <view class="shop-item dis-flex flex-y-center" v-for="(dataItem, index) in dataList" :key="index"
      @click="handleNavDetail(dataItem.shop_id)">
      <view class="shop-item__logo">
        <image class="image" :src="dataItem.logo_url"></image>
      </view>
      <view class="shop-item__content">
        <view class="shop-item__title">
          <span>{{ dataItem.shop_name }}</span>
        </view>
        <view class="shop-item__address oneline-hide">
          <span>门店地址：{{ dataItem.region.province }}{{ dataItem.region.city }}{{ dataItem.region.region }}{{ dataItem.address }}</span>
        </view>
        <view class="shop-item__phone">
          <span>联系电话：{{ dataItem.phone }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mixin from '../mixin'

  export default {

    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },

    mixins: [mixin],

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

      // 跳转到门店详情页
      handleNavDetail(shopId) {
        this.$navTo('pages/shop/detail', { shopId })
      }
    }

  }
</script>

<style lang="scss" scoped>
  .shop-item {
    padding: 16rpx 30rpx;
    min-height: 180rpx;
    font-size: 26rpx;
    line-height: 1.5;
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;
  }

  .shop-item__logo {
    margin-right: 30rpx;

    .image {
      display: block;
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  .shop-item__content {
    flex: 1;
  }

  .shop-item__title {
    font-size: 28rpx;
    color: #fd4a5f;
    margin-bottom: 10rpx;
  }

  .shop-item__address,
  .shop-item__phone {
    color: #919396;
  }

  .shop-item__address {
    width: 520rpx;
  }
</style>
